<!--用户管理页面-->
<template>
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="100px"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="nickname" label="昵称"></el-table-column>
    <el-table-column label="头像">
      <template #default="scope">
        <el-avatar :src="scope.row.imgUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="管理员">
      <template #default="scope">
        <el-switch v-model="scope.row.isAdmin"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import index from "vuex";
const arr = ref([
  {nickname:'汤姆',username:'tom',isAdmin:true,imgUrl:'/imgs/head.jpg',createTime:'2024/2/14 11:08:07'},
  {nickname:'杰瑞',username:'jerry',isAdmin:false,imgUrl:'/imgs/a.jpg',createTime:'2022/2/11 16:33:28'},
  {nickname:'露西',username:'lucy',isAdmin:true,imgUrl:'/imgs/b.jpg',createTime:'2015/5/21 12:09:47'},
  {nickname:'丽丽',username:'lily',isAdmin:true,imgUrl:'/imgs/c.jpg',createTime:'2023/7/13 20:56:01'},
]);
const del = (i,user)=>{
  if(confirm('您确认要删除'+user.nickname+"吗?")){
    arr.value.splice(i,1);
    //ElMessage第一次写的时候需要手动写导入语句
    ElMessage.success(user.nickname+'已被删除!');
  }
}
</script>

<style scoped>

</style>